<template>
  <div class="tab-container">
    <el-tree
      ref="tree"
      :data="dataData"
      show-checkbox
      node-key="id"
      :props="defaultProps"
    ></el-tree>
    <el-button @click="getCheckedNodes">通过 node 获取</el-button>
    <el-button @click="getCheckedKeys">通过 key 获取</el-button>
    <el-button @click="setCheckedNodes">通过 node 设置</el-button>
    <el-button @click="setCheckedKeys">通过 key 设置</el-button>
    <el-button @click="resetChecked">清空</el-button>
    <el-button @click="firstTreeFm">  第二个tree  </el-button>



  </div>
</template>

<script>
//import TabPane from './components/TabPane'

export default {
  name: "Tab",
  //components: { TabPane },
  data() {
    return {
      dataData: [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 4,
              label: "二级 1-1",
              children: [
                {
                  id: 9,
                  label: "三级 1-1-1"
                },
                {
                  id: 10,
                  label: "三级 1-1-2"
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 5,
              label: "二级 2-1"
            },
            {
              id: 6,
              label: "二级 2-2"
            }
          ]
        },
        {
          id: 3,
          label: "一级 3",
          children: [
            {
              id: 7,
              label: "二级 3-1"
            },
            {
              id: 8,
              label: "二级 3-2"
            }
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      },
      keyKey:[],
    };
  },

  created() {
    
  },
  methods: {
    handleCheckChange(data, checked, indeterminate) {
      console.log(data, checked, indeterminate);
    },
    getCheckedNodes() {
      console.log(this.$refs.tree.getCheckedNodes());
    },
    getCheckedKeys() {
      console.log(this.$refs.tree.getCheckedKeys());
      this.keyKey=this.$refs.tree.getCheckedKeys()
    },
     firstTreeFm() {
        console.log('dddddddddddddddddddddd')
        console.log(this.keyKey)
        console.log(this.dataData)
        console.log('dddddddddddddddddddddd')
        //changeData(this.keyKey,this.dataData)
       
    },
    changeData(dataOne,dataTwo){
        let dataList=[]
        dataOne.forEach((item)=>{
             dataTwo.forEach((itemItem)=>{
                  if(item==itemItem.id){
                    dataList.push(itemItem)
                  }
                  if(itemItem.children.length>0){
                    changeData(dataOne,itemItem.children)
                  }

             })   
         })
    },
    
    setCheckedNodes() {
      this.$refs.tree.setCheckedNodes([
        {
          id: 5,
          label: "二级 2-1"
        },
        {
          id: 9,
          label: "三级 1-1-1"
        }
      ]);
    },
    setCheckedKeys() {
      this.$refs.tree.setCheckedKeys([3]);
    },
    resetChecked() {
      this.$refs.tree.setCheckedKeys([]);
    }
  }
};
</script>

<style scoped>
.tab-container {
  margin: 30px;
}
</style>
